<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" label-width="90px">
            <el-form-item label="时间筛选：">
                <span class="label-left">加微日期</span>
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right">
                </el-date-picker>

                <span class="label-left">下单日期</span>
                <el-date-picker
                    v-model="orderRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right">
                </el-date-picker>

                <span class="label-last">回款日期</span>
                <el-date-picker
                    v-model="payRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="基础信息：">
                <el-input v-model="queryParams.lunch_order_code" placeholder="投放订单编号" clearable style="width: 240px" />
                <el-input v-model="queryParams.customer_wechat_name" placeholder="请输入用户昵称" clearable style="width: 240px" />
                <!-- <el-input v-model="queryParams.phone" placeholder="请输入社群老师后台账号" clearable style="width: 240px" /> -->
                <el-input v-model="queryParams.teacher_real_name" placeholder="请输入社群老师" clearable style="width: 240px" />
                <el-input v-model="queryParams.product_name" placeholder="请输入下单商品" clearable style="width: 240px" />
                <el-select v-model="queryParams.status" placeholder="请选择数据状态" clearable style="width: 160px">
                    <el-option label="未冻结" value="1" />
                    <el-option label="已冻结" value="0" />
                </el-select>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row class="mb20" type="flex" justify="space-between">
            <el-col>
                <el-button @click="batchDelete" size="mini">批量删除</el-button>
            </el-col>
            <el-col style="text-align: right;">
                <el-upload class="upload-btn" :action="uploadFileUrl" :headers = "uploadHeader" :on-success="filesSuccess">
                    <el-button type="primary" size="mini">导入数据</el-button>
                </el-upload>
                <el-upload class="upload-btn" :action="uploadtCheckUrl" :headers = "uploadHeader" :on-success="filesSuccess">
                    <el-button type="primary" size="mini">回款导入</el-button>
                </el-upload>
                <el-button type="primary" size="mini" @click="orderExcel">下单模板</el-button>
                <el-button type="primary" size="mini" @click="checkoutExcel">回款模板</el-button>
                <el-button type="primary" size="mini" @click="handleExport">数据下载</el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="teachList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="45" align="center" fixed="left" />
            <el-table-column label="投放订单编号" align="center" prop="lunch_order_code" width="180" fixed="left" />
            <el-table-column label="投放账户ID" align="center" prop="mccid" width="160" :show-overflow-tooltip="true" />
            <el-table-column label="周期" align="center" prop="period_title" />
            <el-table-column label="用户昵称" align="center" prop="customer_wechat_name" :show-overflow-tooltip="true" />
            <el-table-column label="加微日期" align="center" prop="wechat_date" width="120" />
            <el-table-column label="社群老师" align="center" prop="teacher_real_name" width="140" :show-overflow-tooltip="true" />
            <el-table-column label="下单日期" align="center" prop="lunch_order_date" width="100" />
            <el-table-column label="下单商品" align="center" prop="product_name" width="140" :show-overflow-tooltip="true" />
            <el-table-column label="下单数量" align="center" prop="product_num" :show-overflow-tooltip="true" />
            <el-table-column label="下单金额" align="center" prop="order_amount" :show-overflow-tooltip="true" />
            <el-table-column label="实际回款日期" align="center" prop="checkout_date" width="120" :show-overflow-tooltip="true" />
            <el-table-column label="回款商品数" align="center" prop="checkout_product_num" width="100" :show-overflow-tooltip="true" />
            <el-table-column label="回款金额" align="center" prop="checkout_amount" width="100" :show-overflow-tooltip="true" />
            <el-table-column label="会员注册时间" align="center" prop="" width="120" />
            <el-table-column label="平均完播率" align="center" prop="" width="120" />
            <el-table-column label="累计观看时长" align="center" prop="" width="150" />
            <el-table-column label="累计领取红包金额" align="center" prop="" width="160" />
            <el-table-column label="累计答题数量" align="center" prop="" width="100" />
            <el-table-column label="数据状态" align="center" prop="status_title" />
            <el-table-column label="最近修改人" align="center" prop="real_name" width="100" />
            <el-table-column label="最近修改时间" align="center" prop="update_time" width="160" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" width="100px" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="detele([scope.row.id])" :disabled="scope.row.status == 0">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
    </div>
</template>

<script>
import { getList, teachDelete } from "@/api/financial/teach";
import { getTemplate } from "@/api/financial/adver";
import { getToken } from '@/utils/auth'

export default {
    data() {
        return {
            loading: true,	// 遮罩层
            queryParams: { 	// 查询参数
                page: 1,
                pageSize: 20,
            },
            payRange:[],
            dateRange: [],
            orderRange:[],
            teachList:[],
            multiRows:[],
            total:0,
            uploadHeader:{},
            uploadFileUrl: process.env.VUE_APP_BASE_API + "/financial/teacherOrder/importFile", // 上传文件服务器地址
            uploadtCheckUrl: process.env.VUE_APP_BASE_API + "/financial/teacherOrder/importCheckoutFile",
        };
    },
    created() {
        this.uploadHeader.token = getToken()
        this.getList();
    },
    methods: {
        test(e){
            console.log(e)
        },
        getList() {
            this.loading = true;

            //加微时间处理
            this.dateRange = Array.isArray(this.dateRange) ? this.dateRange : [];
            this.queryParams.wechat_date_start = this.dateRange[0];
            this.queryParams.wechat_date_end = this.dateRange[1];

            //下单时间处理
            this.orderRange = Array.isArray(this.orderRange) ? this.orderRange : [];
            this.queryParams.lunch_order_date_start = this.orderRange[0];
            this.queryParams.lunch_order_date_end = this.orderRange[1];

            //回款时间处理
            this.payRange = Array.isArray(this.payRange) ? this.payRange : [];
            this.queryParams.checkout_date_start = this.payRange[0];
            this.queryParams.checkout_date_end = this.payRange[1];

            getList(this.queryParams).then(res => {
                this.teachList = res.data.data
                this.total = res.data.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryParams");
            this.dateRange = []
            this.orderRange = []
            this.payRange = []
            this.queryParams = {
                page: 1,
                pageSize: 20
            }
            this.handleQuery();
        },
        
        filesSuccess(res, file) {
            if(res.code == -1){
                this.$modal.msgError(res.msg);
            }else{
                this.getList()
                this.$modal.msgSuccess(res.msg);
            }
        },
        handleSelectionChange(rows){
            this.multiRows = rows
        },
        batchDelete(){
            const ids = this.multiRows.map(item => item.id)
            if(!ids.length){
                this.$modal.msgError("请选择一条数据");
                return false
            }
            this.detele(ids)
        },
        detele(ids){
            this.$modal.confirm('是否确认删除？').then(function() {
                return  teachDelete({ids:ids})
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('financial/teacherOrder/exportExcel', {
                ...this.queryParams
            }, `教师订单.xlsx`)
        },
        orderExcel(){
            getTemplate().then(res => {
                const fileUrl = res.data.teacher_order
                window.open(fileUrl)
            });
        },
        checkoutExcel() {
            this.download('financial/teacherOrder/downCheckoutExcel', {
                ...this.queryParams
            }, `回款模板.xlsx`)
        },
    }
};
</script>

<style scoped>
  .label-left{display: inline-block;margin-right: 10px;}
  .label-last{display: inline-block;margin-left: 15px;margin-right: 5px;}
  .el-input,
  .el-select{margin-right: 20px;}
  .upload-btn{display: inline-block;margin: 0 10px;}
</style>

<style>
  .upload-btn .el-upload-list{display: none;}
</style>